<template>
  <div class="start">
    <el-card>
      <v-form-render
        :form-data="formData"
        :option-data="optionData"
        ref="vFormRef"
      >
      </v-form-render>
      <template #footer>
        <el-button type="primary" @click="submitForm">提交</el-button></template
      >
    </el-card>
  </div>
</template>

<script>
import { ref, reactive } from "vue";
import { ElMessage } from "element-plus";
import { getProcessForm, startProcess } from "@/api/workflow/process";
const formData = reactive({});
const optionData = reactive({});
const vFormRef = ref(null);

const submitForm = () => {
  vFormRef.value
    .getFormData()
    .then((formData) => {
      let data = JSON.stringify(formData);
      if (data && this.definitionId) {
        // 启动流程并将表单数据加入流程变量
        startProcess(this.definitionId, data).then((res) => {
          this.$modal.msgSuccess(res.msg);
          this.$tab.closeOpenPage({
            path: "/work/own",
          });
        });
      }
    })
    .catch((error) => {
      // Form Validation failed
      ElMessage.error(error);
    });
};

export default {
  name: "Initiate",
  data() {
    return {
      definitionId: null,
      deployId: null,
      procInsId: null,
      optionData: {},
      formData: {},
    };
  },
  created() {},
  mounted() {
    this.initData();
  },
  methods: {
    initData() {
      this.deployId = this.$route.params && this.$route.params.deployId;
      this.definitionId = this.$route.query && this.$route.query.definitionId;
      this.procInsId = this.$route.query && this.$route.query.procInsId;
      getProcessForm({
        definitionId: this.definitionId,
        deployId: this.deployId,
        procInsId: this.procInsId,
      }).then((res) => {
        if (res.data) {
          this.$refs["vFormRef"].setFormJson(res.data);
        }
      });
    },
    /** 接收子组件传的值 */
    getData(data) {
      if (data) {
        const variables = [];
        data.fields.forEach((item) => {
          let variableData = {};
          variableData.label = item.__config__.label;
          // 表单值为多个选项时
          if (item.__config__.defaultValue instanceof Array) {
            const array = [];
            item.__config__.defaultValue.forEach((val) => {
              array.push(val);
            });
            variableData.val = array;
          } else {
            variableData.val = item.__config__.defaultValue;
          }
          variables.push(variableData);
        });
        this.variables = variables;
      }
    },
    submitForm() {
      this.$refs["vFormRef"]
        .getFormData()
        .then((data) => {
          if (data && this.definitionId) {
            // 启动流程并将表单数据加入流程变量
            startProcess(this.definitionId, data).then((res) => {
              this.$modal.msgSuccess(res.msg);
              this.$tab.closeOpenPage({
                path: "/work/own",
              });
            });
          }
        })
        .catch((error) => {
          // Form Validation failed
          ElMessage.error(error);
        });
    },
  },
};
</script>

<style lang="less" scoped>
.start {
  padding: 10px;
  height: 100%;
  .el-card {
    :deep(.el-card__body) {
      .el-form {
        .el-form-item {
          background-color: #f7f7f7;
          padding: 4px;
          border-radius: 4px;
        }
      }
    }
    .el-card__footer {
      .el-button {
        width: 100%;
      }
    }
  }
}
</style>
